<template>
  <div class="singer">
    <div class="singer_left">
      <h3>热门</h3>
      <ul>
        <li><router-link to="/Singer/" :class="{show:area==undefined&&type==undefined}">热门歌手</router-link></li>
      </ul>
      <h3>华语</h3>
      <ul>
        <li><router-link to="/Singer/7/1" :class="{show:area==7&&type==1}">华语男歌手</router-link></li>
        <li><router-link to="/Singer/7/2" :class="{show:area==7&&type==2}">华语女歌手</router-link></li>
        <li><router-link to="/Singer/7/3" :class="{show:area==7&&type==3}">华语组合/乐队</router-link></li>
      </ul>
      <h3>欧美</h3>
      <ul>
        <li><router-link to="/Singer/96/1" :class="{show:area==96&&type==1}">欧美男歌手</router-link></li>
        <li><router-link to="/Singer/96/2" :class="{show:area==96&&type==2}">欧美女歌手</router-link></li>
        <li><router-link to="/Singer/96/3" :class="{show:area==96&&type==3}">欧美组合/乐队</router-link></li>
      </ul>
      <h3>日本</h3>
      <ul>
        <li><router-link to="/Singer/8/1" :class="{show:area==8&&type==1}">日本男歌手</router-link></li>
        <li><router-link to="/Singer/8/2" :class="{show:area==8&&type==2}">日本女歌手</router-link></li>
        <li><router-link to="/Singer/8/3" :class="{show:area==8&&type==3}">日本组合/乐队</router-link></li>
      </ul>
      <h3>韩国</h3>
      <ul>
        <li><router-link to="/Singer/16/1" :class="{show:area==16&&type==1}">韩国男歌手</router-link></li>
        <li><router-link to="/Singer/16/2" :class="{show:area==16&&type==2}">韩国女歌手</router-link></li>
        <li><router-link to="/Singer/16/3" :class="{show:area==16&&type==3}">韩国组合/乐队</router-link></li>
      </ul>
      <h3>其他</h3>
      <ul>
        <li><router-link to="/Singer/0/1" :class="{show:area==0&&type==1}">其他男歌手</router-link></li>
        <li><router-link to="/Singer/0/2" :class="{show:area==0&&type==2}">其他女歌手</router-link></li>
        <li><router-link to="/Singer/0/3" :class="{show:area==0&&type==3}">其他组合/乐队</router-link></li>
      </ul>
    </div>
    <div class="singer_right">
      <router-view :key="$route.fullPath"></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      area:"",
      type:""
    };
  },
  // 
  created () {
    this.area=this.$route.params.area
    this.type=this.$route.params.type
  }
};
</script>
<style scoped>
.singer{
  display: flex;
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
  border-left: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
}
.singer .singer_left{
  width: 180px;
  padding: 50px 10px 40px;
}
.singer .singer_right{
  width: 800px;
  border-left: 1px solid #d7d7d7;
  padding:40px;
}
.singer >.singer_left>h3{
  font-size: 16px;
  padding-left: 15px;
}
.singer >.singer_left>h3:nth-of-type(n+2){
  padding-top: 20px;
  margin-top: 10px;
  border-top: 1px solid #d4d4d4;
}
.singer >.singer_left>ul>li{
  margin: 3px 0;
}
.singer >.singer_left>ul>li>a{
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  border: 1px solid transparent;
  color: #333333;
  padding-left: 27px;
  background: url("../../public/images/singer.png") no-repeat 0px -30px;
}
.singer >.singer_left>ul>li>a:hover{
  text-decoration: underline;
}
.singer >.singer_left>ul>li>.show{
  background-position: 0px 0px;
  color: #c20c0c;
  border-right: 1px solid #d4d4d4;
}
</style>